import React, { useState, useEffect, useContext } from 'react'
import Nav from '../Nav/index.jsx'
import { Carousel, WingBlank } from 'antd-mobile';
import { find, getpersonalizedList, getTopAlbum } from '../../Request/find'
import { Link, useHistory } from 'react-router-dom';
import MyContext from '../../actions'
import './find.css'


// 轮播图组件
const WingBlankS = (dataCount) => (<WingBlank style={{ borderRadius: '10px', overflow: 'hidden', margin: '0px 10px', height: '20vh' }}>
  <Carousel autoplay={false} infinite beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)} afterChange={index => console.log('slide to', index)} style={{ height: '20vh' }}>
    {dataCount.map(val => (
      <a key={val.targetId} href="" style={{ display: 'inline-block', width: '100%', height: '20vh' }}>
        <img src={val.imageUrl} alt="图片" style={{ width: '100%', height: '100%' }} />
      </a>
    ))}
  </Carousel></WingBlank>)

export default () => {
  const dispatch = useContext(MyContext);
  const history = useHistory();
  // 获取到的数据
  const [dataCount, setdataCount] = useState([])
  const [objfont] = useState([{ url: '/recommendedDaily', icon: 'icon-daka', text: '每日推荐' },
  { url: '/songSheetSquare', icon: 'icon-yinyue', text: '歌单' },
  { url: '/rankingList', icon: 'icon-tiaoxing', text: '排行榜' },
  { url: '/RadioStation', icon: 'icon-diantai', text: '电台' },
  { url: '/songSheetSquare', icon: 'icon-zhibobofangshexiangjitianxianmianxing', text: '直播' }])
  const [perslist, setperslist] = useState([])
  const [monthData, setMonthData] = useState([])

  // 专辑切换
  const [clsList, setClsList] = useState('left')

  const filterWan = (PlayCount) => {
    return Math.floor(PlayCount / 10000)
  }

  const clsLists = (cls) => {
    return cls == clsList ? 'lics' : ''
  }

  // 新歌新碟切换逻辑
  const valueLic = (values) => {
    setClsList(values)
  }

  // 轮播图接口
  useEffect(() => {
    const fetchData = async () => {
      const result = await find()
      setdataCount(result.data.banners)
    }
    fetchData()
  }, [])

  // 推荐歌单接口
  useEffect(() => {
    const fetchData = async () => {
      const { data } = await getpersonalizedList()
      setperslist(data.result)
    }
    fetchData()
  }, [])

  // 新碟接口
  useEffect(() => {
    const fetchData = async () => {
      const { data } = await getTopAlbum()
      // console.log(data)
      setMonthData(data.monthData)
    }
    fetchData()
  }, [])

  return (
    <div className="find-view">
      {/* 导航栏 */}
      <div className="nav">
        <Nav />
      </div>

      {/* 页面主题区域 */}
      <div className="content">
        {/* 轮播图 */}
        <div className="banner">{WingBlankS(dataCount)}</div>

        {/* center部位 */}
        <div className="centerNav">
          {objfont.map((as, i) => (<Link className="centerNav-items" key={i} to={as.url}>
            <div className="items-icon">
              <i className={`iconfont ${as.icon}`}></i>
            </div>
            <span className="items-txt">{as.text}</span>
          </Link>)
          )}
        </div>

        {/* 推荐歌单 */}
        <div className="recommend">
          <div className="rec-header">
            <h3 className="title">推荐歌单</h3>
            {/* onClick={()=>{history.push('/songSheetSquare')}}  通过a 标签的href 熟悉进行跳转,如果不需要可以阻止默认事件并通过编程式导航进行跳转 */}
            <a href="/#/songSheetSquare" className="more">歌单广场</a>
          </div>
          <div className="rec-items">
            {
              perslist.map((val, i) => {
                return <div className="rec-item" key={i} onClick={() => {
                  history.push({
                    pathname: '/songSheetDetail',
                    query: { id: val.id }
                  })
                }}>
                  <div className="rec-img-warp">
                    <div className="img-warp">
                      <img src={val.picUrl} alt={val.alg} />
                    </div>
                    <span className="number-plays">
                      <i className="iconfont icon-bofang"></i>{filterWan(val.playCount)}万
                    </span>
                  </div>
                  <p className="rec-item-txt">{val.name}</p>
                </div>
              })
            }
          </div>
        </div>

        {/* 新歌和专辑 */}
        <div className="music-lbum">
          <div className="mus-lbu-title">
            <div className="ml-titie-left">
              <span className={clsLists('left')} onClick={valueLic.bind(this, 'left')}>新歌</span> | <span className={clsLists('right')} onClick={valueLic.bind(this, 'right')}>新碟</span>
            </div>
            <a href="/#/morenewdiscs" className="ml-href">更多新碟</a>
          </div>
          <div className="mus-lbu-main">
            {
              monthData.map((item, i) => {
                return <div className="list-item" key={i}>
                  <div className="item-img-warp">
                    <img src={item.picUrl} alt="" />
                  </div>
                  <p className="list-txt">{item.name}</p>
                </div>
              })
            }
          </div>
        </div>
      </div>

    </div>
  )
}